<template>
	<div>
		<div id="container">
			<div class="product">
				<div class="pro_line">
					<router-link to="/home" class="goHome">返回首页</router-link>
				</div>
				<div class="pro_show" v-if="searchresults.length">
					<ProductItem v-for="(goods, index) in paginatedResults" :key="index" :pro="goods" />
				</div>
				<div v-else class="no-results">
					找不到您想要的商品
				</div>
			</div>
		</div>
		<div id="footer" v-if="searchresults.length">
			<el-pagination background layout="prev, pager, next" :total="searchresults.length" :page-size="pageSize"
				@current-change="handlePageChange"></el-pagination>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex'
import ProductItem from '../../components/ProductItem/ProductItem'

export default {
	data() {
		return {
			currentPage: 1,
			pageSize: 4, // 每页显示的商品数
		}
	},
	components: {
		ProductItem
	},
	computed: {
		...mapState(['searchresults']),
		paginatedResults() {
			const start = (this.currentPage - 1) * this.pageSize;
			const end = start + this.pageSize;
			return this.searchresults.slice(start, end);
		},
	},
	methods: {
		handlePageChange(page) {
			this.currentPage = page;
		},
		goDetail(id) {
			this.$router.replace('/goods/' + id);
		},
	},
}
</script>

<style scoped>
#container {
	position: relative;
	margin: 30px auto;
	width: 100%;
	padding: 0 20px;
}

.product {
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}

.product>.pro_line {
	margin-bottom: 20px;
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-size: 26px;
	font-family: sans-serif;
	font-weight: normal;
	color: #222;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 2px solid #eee;
}

.goHome {
	font-size: 16px;
	display: inline-block;
	text-decoration: none;
	color: skyblue;
	cursor: pointer;
}

.goHome:hover {
	color: #ccc;
}

.product>.pro_show {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-around;
	margin-top: 20px;
}

.no-results {
	text-align: center;
	font-size: 18px;
	color: #999;
	margin-top: 50px;
}

#footer {
	margin-top: 20px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.custom-pagination {
	text-align: center;
	margin-top: 20px;
}

/* 响应式布局 */
@media (max-width: 768px) {
	.product>.pro_show {
		flex-direction: column;
		align-items: center;
	}

	.pro_line {
		flex-direction: column;
		align-items: flex-start;
	}

	.goHome {
		margin-top: 10px;
	}
}

@media (max-width: 480px) {
	.goHome {
		font-size: 14px;
	}

	.product>.pro_show {
		flex-direction: column;
		gap: 10px;
	}
}
</style>
